import React from 'react';
import { connect } from 'react-redux';
import action from '../../../store/actions/index';
import SubHeaderComponent from '../../../components/subHeader/index';
import config from '../../../assets/js/conf/config';
import Css from '../../../assets/css/home/cart/index.css';

class Index extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            bAllChecked: true
        }
    }

    componentDidMount(){
        this.isAllChecked();
    }

    //删除商品
    deleteItem(index){
        this.props.dispatch(action.cart.deleteItem({ index }));
        this.isAllChecked();
    }

    //选择商品
    checkItem(index, checked){
        this.props.dispatch(action.cart.checkItem({ index, checked }));
        this.isAllChecked();
    }

    //是否全选
    isAllChecked(){
        const { aCartData } = this.props.cart;
        if(aCartData.length > 0){
            let bChecked = true;
            for(let i = 0, len = aCartData.length; i < len; i++){
                if(!aCartData[i].checked){
                    this.setState({ bAllChecked: false });
                    bChecked = false;
                    break;
                }
            }
            bChecked && this.setState({ bAllChecked: true });
        }else{
            this.setState({ bAllChecked: false });
        }
    }

    //设置全选
    setAllChecked(checked){
        if(this.props.cart.aCartData.length > 0){
            this.setState({ bAllChecked: checked });
            this.props.dispatch(action.cart.checkAll({ checked }));
        }
    }

    //增加数量
    incAmount(index){
        const { aCartData } = this.props.cart;
        if(aCartData.length > 0 && aCartData[index].checked){
            this.props.dispatch(action.cart.incAmount({ index }));
        }
    }

    //减少数量
    decAmount(index){
        const { aCartData } = this.props.cart;
        if(aCartData.length > 0 && aCartData[index].checked){
            this.props.dispatch(action.cart.decAmount({ index }));
        }
    }

    //数量手动输入
    iAmountChange(index, e){
        const { aCartData } = this.props.cart;
        if(aCartData.length > 0 && aCartData[index].checked){
            let amount = 1;
            if(e.target.value !== ''){
                amount = e.target.value.replace(/[a-zA-Z]|[\u4e00-\u9fa5]|[#|*|,|+|;|\.]/g, '');
                if(amount === ''){ amount = 1 }
            }
            this.props.dispatch(action.cart.changeAmount({ index, value: amount }));
        }
    }

    //跳转到结算页面
    goBalance(url){
        const { total } = this.props.cart;
        total > 0 && this.props.history.push(config.path+url);
    }

    componentWillUnmount(){
        //页面卸载时，重写setState,避免内存溢出
        this.setState = (state, callback) => {
            return ;
        }
    }
    
    render() {
        const { aCartData, total } = this.props.cart;
        const { bAllChecked } = this.state;
        return (
            <div>
              {/* 头部 */}
              <SubHeaderComponent title='购物车'></SubHeaderComponent>  
              {/* 商品列表 */}
              <div className={Css['cart-main']}>
                {
                    aCartData.length > 0 ? aCartData.map((item, index) => {
                        return (
                            <div key={index} className={Css['cart-list']}>
                                <div className={item.checked ? Css['select-btn']+' '+Css['active'] : Css['select-btn']} onClick={() => this.checkItem(index, item.checked)}></div>
                                <div className={Css['image-wrap']}>
                                    <div className={Css['image']}><img src={item.img} alt='loading' /></div>
                                    <div className={Css['del']} onClick={() => this.deleteItem(index)}>删除</div>
                                </div>
                                <div className={Css['goods-wrap']}>
                                    <div className={Css['goods-title']}>{item.title}</div>
                                    <div className={Css['goods-attr']}>
                                        {
                                            item.attrs.length > 0 ? item.attrs.map((ktem, kndex) => {
                                                return (
                                                    <span key={kndex}>{ktem.title}：
                                                    {
                                                        ktem.param.length > 0 ? ktem.param.map((ptem, pndex) => {
                                                            return (
                                                                <React.Fragment key={pndex}>{ptem.title}</React.Fragment>
                                                            )
                                                        }) : ''
                                                    }
                                                    </span>
                                                )
                                            }) : ''
                                        }
                                    </div>
                                    <div className={Css['buy-wrap']}>
                                        <div className={Css['price']}>￥{item.price}</div>
                                        <div className={Css['amount-input-wrap']}>
                                            <div className={item.amount > 1 ? Css['btn']+' '+Css['dec'] : Css['btn']+' '+Css['dec']+' '+Css['active']} onClick={() => this.decAmount(index)}>-</div>
                                            <div className={Css['amount-input']}><input type='tel' value={item.amount} onChange={(e) => this.iAmountChange(index, e)} /></div>
                                            <div className={Css['btn']+' '+Css['inc']} onClick={() => this.incAmount(index)}>+</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }) : <div className='null-item' style={{marginTop:'1rem'}}>暂无添加商品</div>
                }
              </div>
              {/* 底部导航栏 */}
              <div className={Css['orderend-wrap']}>
                  <div className={Css['select-area']}>
                    <div className={Css['select-wrap']}>
                        <div className={bAllChecked ? Css['select-btn']+' '+Css['active'] : Css['select-btn']} onClick={() => this.setAllChecked(!bAllChecked)}></div>
                        <div className={Css['select-text']}>全部</div>
                    </div>
                    <div className={Css['total']}>合计：<span>￥{total}</span></div>
                  </div>
                  <div className={total > 0 ? Css['orderend-btn'] : Css['orderend-btn']+' '+Css['disable']} onClick={() => this.goBalance('balance/index')}>去结算</div>
              </div>
            </div>
        )
    }
}

export default connect((store) => {
    return store
})(Index);